<!DOCTYPE html>
<html>
<head>
  <meta content="IE=11.0000" http-equiv="X-Ua-Compatible">
  <meta charset="utf-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
  <!---->
  <title>选择场景</title>
  <!--region 引入公用js和css -->
  <link href="../assets/plugins/animate/animate.css" rel="stylesheet">
  <link href="../assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
  <link href="../assets/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
  <link href="../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
  <link href="../assets/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css"/>
  <link href="../assets/plugins/fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css"/>
  <link href="../assets/base/css/components.css" rel="stylesheet" id="style_components" type="text/css"/>
  <link href="../assets/base/css/plugins.css" rel="stylesheet" type="text/css"/>
  <link href="../assets/ditop/layout.css" rel="stylesheet" type="text/css"/>
  <link href="../assets/plugins/datatables/datatables.min.css" rel="stylesheet" type="text/css"/>
  <link href="../assets/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css" rel="stylesheet" type="text/css"/>
  <link href="../assets/plugins/bootstrap-table/bootstrap-table.css" rel="stylesheet">
  <link href="../assets/plugins/bootstrap-table/extensions/tree-column/bootstrap-table-tree-column.css" rel="stylesheet">
  <link href="../assets/plugins/bootstrap-toastr/toastr.css" rel="stylesheet">
  <link rel="stylesheet" href="../assets/plugins/sweetalert/sweetalert.css">
  <link rel="stylesheet" href="../assets/plugins/layer/theme/default/layer.css">
  <link href="../assets/plugins/select2/css/select2.min.css" rel="stylesheet">
  <link href="../assets/plugins/icheck/skins/flat/aero.css" rel="stylesheet">
  <link href="../assets/ditop/ditop.css" rel="stylesheet">
  <link href="../assets/ditop/style/ztree/style9/treestyle.css" rel="stylesheet">
  <link href="../assets/plugins/bootstrap-touchspin/bootstrap.touchspin.css" rel="stylesheet">
  <link href="../assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet" type="text/css"/>
  <script src="../assets/plugins/jquery/jquery.min.js"></script>
  <script src="../assets/plugins/bootstrap/js/bootstrap.min.js"></script>
  <script src="../assets/plugins/bootstrap-toastr/toastr.js"></script>
  <script src="../assets/plugins/art-template/template.js"></script>
  <script src="../assets/plugins/layer/layer.js"></script>
  <script src="../assets/ditop/ditop.js"></script>
  <!--endregion-->

  <link rel="stylesheet" href="../assets/module/common/gcjsy_js.css">
  <link href="../assets/module/gcjsy/css/public.css" rel="stylesheet"> <!-- CSS Customization -->
  <style>
    .purple{
      color: #6C50F6!important;
    }
    .scene{
      width: 700px;
      margin: 0 auto;
    }
    .scene>li{
      width:160px;
      height:104px;
      background:rgba(248,248,248,1);
      margin: 0 20px 18px 0;
      text-align: center;
      padding: 24px 0 0 0;
      float: left;
      cursor: pointer;
      border: 1px solid transparent;
    }
    .scene>li:nth-last-child(-n+4){
      margin-bottom: 0;
    }
    .scene>li:hover{
      background: white;
      box-shadow: 0 0 10px rgba(25, 25, 35, 0.07);
    }
    .scene>li.active{
      border: 1px solid #6C50F6;
      background:rgba(247,245,255,1);
    }
    .scene>li a{
      display: block;
      color: #606060;
    }
    .scene>li img{
      margin-bottom: 10px;
    }
    .scene>li p{
      line-height: 1.2;
    }
    .scene>li:nth-child(4n){
      margin-right: 0;
    }
    .layer-head{
      text-align: center;
      position: relative;
      padding: 30px 0;
    }
    .layer-head h3{
      font-size: 18px;
      font-weight: 500;
    }
    html .layui-layer-setwin{
      top: 20px;
      right: 20px;
    }

    .new-submit{
      text-align: center;
    }
    .newBtn{
      width:150px;
      height:35px;
      text-align: center;
      line-height: 33px;
      border-radius:17px!important;
      outline: none;
      border: none;
    }
    .newBtn.sure{
      background:linear-gradient(90deg,rgba(156,136,255,1) 0%,rgba(108,80,246,1) 100%);
      color: white;
    }
    .newBtn.sure:hover{
      background:linear-gradient(90deg,rgba(156,136,255,.9) 0%,rgba(108,80,246,.9) 100%);
    }
    .newBtn.cancel{
      border:1px solid #6C50F6;
      color: #6C50F6;
      line-height: 31px;
      background: white;
    }
    .newBtn.cancel:hover{
      background: #F5F3FF;
    }
  </style>
</head>


<body>

<div class="center-block popup-box display-none" id="id1" style="display: block;width: 780px">
  <div class="layer-head">
    <h3>请选择你需要的服务</h3>
    <span class="layui-layer-setwin">
        <a class="layui-layer-ico layui-layer-close layui-layer-close1" href="javascript:;"></a></span>
  </div>
  <div class="no-scroll" style="height: 348px;">

    <ul class="scene clearfix">
      <li class="scene-item">
        <a href="#">
          <img src="../assets/images/scene/s1.png" alt="">
          <p>同步项目信息</p>
        </a>
      </li>
      <li class="scene-item">
        <a href="#">
          <img src="../assets/images/scene/s2.png" alt="">
          <p>招标代理委托</p>
        </a>
      </li>
      <li class="scene-item">
        <a href="#">
          <img src="../assets/images/scene/s3.png" alt="">
          <p>工程勘察委托</p>
        </a>
      </li>
      <li class="scene-item">
        <a href="#">
          <img src="../assets/images/scene/s4.png" alt="">
          <p>施工图设计委托</p>
        </a>
      </li>
      <li class="scene-item">
        <a href="#">
          <img src="../assets/images/scene/s5.png" alt="">
          <p>施工图审查委托</p>
        </a>
      </li>
      <li class="scene-item">
        <a href="#">
          <img src="../assets/images/scene/s6.png" alt="">
          <p>工程造价咨询委托</p>
        </a>
      </li>
      <li class="scene-item">
        <a href="#">
          <img src="../assets/images/scene/s7.png" alt="">
          <p>施工总承包/<br> 专业承包发包</p>
        </a>
      </li>
      <li class="scene-item">
        <a href="#">
          <img src="../assets/images/scene/s8.png" alt="">
          <p>工程监理发包</p>
        </a>
      </li>
      <li class="scene-item">
        <a href="#">
          <img src="../assets/images/scene/s9.png" alt="">
          <p>施工许可证申请</p>
        </a>
      </li>
      <li class="scene-item">
        <a href="#">
          <img src="../assets/images/scene/s10.png" alt="">
          <p>申请竣工验收</p>
        </a>
      </li>
      <li class="scene-item">
        <a href="#">
          <img src="../assets/images/scene/s11.png" alt="">
          <p>竣工备案</p>
        </a>
      </li>

      <li class="scene-item">
        <a href="#">
          <img src="../assets/images/scene/s12.png" alt="">
          <p>管理员工权限</p>
        </a>
      </li>
      <li class="scene-item">
        <a href="#">
          <img src="../assets/images/scene/s13.png" alt="">
          <p>查看项目档案</p>
        </a>
      </li>
      <li class="scene-item">
        <a href="#">
          <img src="../assets/images/scene/s14.png" alt="">
          <p>数据分析决策</p>
        </a>
      </li>
      <li class="scene-item">
        <a href="#">
          <img src="../assets/images/scene/s15.png" alt="">
          <p>跟进办件进度</p>
        </a>
      </li>

      <li class="center no-padding scene-more">
        <a href="#" class="purple">更多服务 <i class="dtFont dtFont-gengduo"></i></a>
      </li>
    </ul>

  </div>
  <div class="new-submit padding-tb-30">
    <button class="newBtn sure margin-right-20">立即前往</button>
    <button class="newBtn cancel" onclick="layer.closeAll()" href="javascript:;">不了，随便逛逛</button>
  </div>

</div>
<!--region 引入公用js和css -->
<script src="../assets/plugins/sweetalert/sweetalert.min.js"></script>
<script src="../assets/plugins/jquery.blockui.min.js"></script>
<script src="../assets/plugins/js.cookie.min.js"></script>
<script src="../assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="../assets/plugins/jquery.blockui.min.js"></script>
<script src="../assets/plugins/bootstrap-switch/js/bootstrap-switch.min.js"></script>
<script src="../assets/plugins/bootstrap-touchspin/bootstrap.touchspin.js"></script>
<script src="../assets/plugins/moment.min.js"></script>
<script src="../assets/plugins/bootstrap-daterangepicker/daterangepicker.min.js"></script>
<script src="../assets/plugins/counterup/jquery.waypoints.min.js"></script>
<script src="../assets/plugins/counterup/jquery.counterup.min.js"></script>
<script src="../assets/plugins/fullcalendar/fullcalendar.js"></script>
<script src="../assets/plugins/horizontal-timeline/horizontal-timeline.js"></script>
<script src="../assets/plugins/jquery.sparkline.min.js"></script>
<script src="../assets/plugins/select2/js/select2.js"></script>
<script src="../assets/plugins/select2/js/i18n/zh-CN.js"></script>
<script src="../assets/plugins/ztree/jquery.ztree.all.js"></script>
<script src="../assets/plugins/jquery-form/jquery.form.js"></script>
<script src="../assets/plugins/jquery-validator/jquery.placeholder.min.js"></script>
<script src="../assets/plugins/jquery-validator/jquery.validate.js"></script>
<script src="../assets/plugins/jquery-validator/jquery.validate.custom.js"></script>
<script src="../assets/plugins/jquery-validator/localization/messages_zh.js"></script>
<script src="../assets/plugins/jquery-validator/additional-methods.js"></script>
<script src="../assets/plugins/bootstrap-growl/jquery.bootstrap-growl.js"></script>
<script src="../assets/plugins/bootstrap-table/bootstrap-table.js"></script>
<script src="../assets/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<script src="../assets/plugins/bootstrap-table/extensions/tree-column/bootstrap-table-tree-column.js"></script>
<script src="../assets/base/scripts/app.js"></script>
<script src="../assets/base/scripts/theme.js"></script>
<script src="../assets/ditop/ditop-addition.js"></script>
<script src="../assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
<script src="../assets/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"
        type="text/javascript"></script>
<script type="text/javascript" src="../assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"
        charset="UTF-8"></script>
<script type="text/javascript"
        src="../assets/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"
        charset="UTF-8"></script>
<script src="../assets/plugins/jquery-validator/jquery.validate.custom.js"></script>
<script src="../assets/ditop/layout.js"></script>
<!--endregion-->


<script>
  var sceneItem = $('.scene>.scene-item');
  var sceneMore = $('.scene-more');

  sceneItem.on('click',function () {
    if($(this).hasClass('active')){
      $(this).removeClass('active')
    }else {
      $(this).addClass('active')
    }
  });
  if (sceneItem.length>12){
    sceneItem.each(function (index) {
      if(index>10)$(this).hide();
    });
    sceneMore.show()
  } else {
    sceneMore.hide()
  }
  sceneMore.on('click',function () {
    $('.no-scroll').css({overflow: 'auto'});
    sceneItem.each(function () {
      $(this).show();
    });
    sceneMore.hide()
  })
</script>
</body>
</html>

